<template>
    <div class="ck">
      <div class="header">
        <ul>
          <li><div class="head-font"></div></li>
          <li><p>&nbsp; 媒体报道</p></li>
          <li><el-button style="float:left;
        margin-left:930px;
        border: 4px solid #009688;
        color: white;
        background-color: #009688;"
        @click="openMedia()"
        >新增报道</el-button></li>
        </ul>
      </div>

      
        <el-table
              style="width: 1250px; margin-top:30px;"
              :header-cell-style="{ background: 'silver', color: '#606266' }"
              :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
              >
              <el-table-column width="20px"></el-table-column>
              <el-table-column label="Id" width="100px" prop="mediaId"></el-table-column>
              <el-table-column label="报道图片" width="200px" prop="mediaImg" >
                <template slot-scope="scope">
                  <img :src="scope.row.mediaImg" min-width="100" height="100"/>
                </template>
              </el-table-column>
              <el-table-column label="报道标题" width="200px" prop="mediaTitle"></el-table-column>
              <el-table-column label="报道信息" width="540px" prop="mediaInfo"></el-table-column>
              <el-table-column label="报道时间" width="190px" prop="mediaDate"></el-table-column>  
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 6, 9, 12, 15]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px;margin-left: 150px"
            :total="list.length">
        </el-pagination>

         <!---------新增媒体报道弹框-------->
         <el-dialog
            title="报道信息"
            :visible.sync="dialogMedia"
            width="50%"
            :before-close="handleClose"
         >
          <el-form :model="mediaList" label-width="120px">
              <el-form-item label="报道标题">
                  <el-input v-model="mediaList.mediaTitle" placeholder="请输入报道标题" style="width:80%"></el-input>
              </el-form-item>
              <el-form-item label="报道图片">
                 <el-upload class="avatar-uploader" action=""  
                  v-model="mediaList.mediaImg" 
                  :http-request="uploadURL"                     
                  :multiple = true :before-upload="handleBeforeUpload" 
                  :limit="8">
                    <img v-if="mediaList.mediaImg" :src="mediaList.mediaImg" class="avatar"> 
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </el-form-item>
              <el-form-item label="报道信息">
                  <el-input v-model="mediaList.mediaInfo" placeholder="请输入报道信息" type="textarea" style="width:80%"></el-input>
              </el-form-item>
          </el-form>

          <template>
            
              <el-button @click="dialogMedia = false" style="margin-left:560px;">取 消</el-button>
              <el-button type="primary" @click="saveMedia()">确 定</el-button>
            
          </template>
         </el-dialog>

    </div>
</template>

<script>
import axios from "axios";
import {client,getFileNameUUID} from '../alioss'
export default  {
  data () {
    return {
      list : [],
      currentPage: 1,//初始页
      pagesize :2 ,//每页条数
      dialogMedia:false,  //定义弹框
      mediaList:{
        mediaTitle:"",
        mediaImg:"",
        mediaInfo:"",
      },
      
    }
  },

  created () {
    this.findMediaList()
  },

  methods: {
    //查询媒体报道
    findMediaList(){
      axios({   
        url: "/api/invest/getMediaList",
      }).then((res) => {
          console.log(res.data);
      this.list = res.data.data;
      });
    },
    //打开弹框
    openMedia(){
      this.dialogMedia=true;
    },
    //分页
    handleSizeChange (size) {
        console.log(size,'size');
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange (currentPage) {
      console.log(currentPage,'currentPage');
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },

      // 上传文件之前
          handleBeforeUpload(file) {
              const isJPEG = file.name.split('.')[1] === 'jpeg';
              const isJPG = file.name.split('.')[1] === 'jpg';
              const isPNG = file.name.split('.')[1] === 'png';
              const isWEBP = file.name.split('.')[1] === 'webp';
              const isGIF = file.name.split('.')[1] === 'gif';
              const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 8;
              if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
              this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
              }
              if (!isLt500K) {
              this.$message.error('单张图片大小不能超过 4mb!');
              }
              return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
          },
          uploadURL(file) {
          //注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
          var fileName = 'img/'+'banner' + `${Date.parse(new Date())}` + '.jpg'; 
          //定义唯一的文件名，打印出来的uid其实就是时间戳
          client().multipartUpload(fileName, file.file,{
                progress: function(percentage, cpt) {
                  console.log('打印进度',percentage)
                }
              }).then((res)=>{
          //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
                                  //
          this.mediaList.mediaImg = 'https://binzi666.oss-cn-beijing.aliyuncs.com/' + fileName;
        })
      },
      //确认新增
      saveMedia(){
        axios({
          url:"/api/invest/addMedia",
          params:
                this.mediaList,
          }).then((res) => {
            console.log(res.data)
            this.$message('新增成功')
            this.mediaList = ''
            this.dialogMedia=false;
            this.findMediaList()
          });
      },

  },
}
</script>

<style>
.ck{
  width: 1250px;
  height: 1480px;
}
.header ul {
  width: 1250px;
  height: 50px;
  background-color: white;
  display: flex;
  padding-top: 20px;
  padding-left: 30px;
}
.header ul p {
  font-size: 22px;
  
}
.head-font {
  background-color: #0066ff;
  width: 7px;
  height: 25px;
  border-radius: 10px;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.state{
    margin-top:15px;
}
.avatar-uploader .el-upload {
    
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 340px;
    width: 485px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 0px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    
  }
  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
  .el-icon-plus:before {
    content: "\E62B";
    line-height: 300px;
}
</style>  